<template>
	<view class="container">
		<!-- 顶部导航 -->
		<view class="header_nav">
			<view class="icon_box">
				<!-- 图标 -->
				<view class="icon"></view>
				<!-- 文字 -->
				<view class="icon_text">
					跳转1
				</view>
			</view>
			<view class="icon_box">
				<!-- 图标 -->
				<view class="icon"></view>
				<!-- 文字 -->
				<view class="icon_text">
					跳转2
				</view>
			</view>
			<view class="icon_box">
				<!-- 图标 -->
				<view class="icon"></view>
				<!-- 文字 -->
				<view class="icon_text">
					跳转3
				</view>
			</view>
			<view class="icon_box">
				<!-- 图标 -->
				<view class="icon"></view>
				<!-- 文字 -->
				<view class="icon_text">
					跳转4
				</view>
			</view>
		</view>
		<!-- 热门 -->
		<view class="hot_project project">
			<!-- 标题 -->
			<title-component titleName="热门专题"></title-component>
			<!-- 滑动区域 -->
			<u-swiper :list="list3" previousMargin="30" nextMargin="30" circular :autoplay="false" radius="5"
				bgColor="#ffffff">
			</u-swiper>
		</view>
		<!-- 任务 -->
		<view class="task_project">
			<!-- 标题 -->
			<title-component titleName="推荐任务"></title-component>
			<!-- 滑动区域 -->
			<task-card v-for="(item, index) in 6" :key="index"></task-card>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list3: [
					"https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2350817201,1137116540&fm=26&gp=0.jpg",
					"https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3545834692,4156954932&fm=26&gp=0.jpg",
					"https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=774373677,2313985244&fm=26&gp=0.jpg"
				],
			};
		}
	}
</script>

<style lang="scss">
	@import url("/static/css/base.css");
	.header_nav {
		padding: 30rpx 70rpx;
		background-color: #FFF;
		display: flex;
		justify-content: space-between;

		.icon_box {
			height: 120rpx;
			text-align: center;
			font-size: $bsin-basin-font;

			.icon {
				width: 90rpx;
				height: 90rpx;
				border-radius: 50%;
				background-color: skyblue;
			}
		}
	}

	
	
</style>
